
   //nav切换样式
   $(".nav a").click(event=>{
       let eId = event.target.id;
       let showLi = $("#"+eId).parents("li");

       if(eId == "photoTab"){
           showLi.removeClass();
           showLi.prev().addClass("active")
           show("photo");
       }
       if(eId == "aboutTab")
       {
           showLi.removeClass();
           showLi.next().addClass("active");
           show("about");
       }
   })

   //tab页
   function show(type){
       let aboutDiv = $("#about");
       let photoDiv = $("#photoBook");

       if(type =="about"){
           aboutDiv.css("display","block");
           photoDiv.css("display", "none");
       }
       if(type =="photo"){
           aboutDiv.css("display","none");
           photoDiv.css("display", "block");
       }
   }

   //注册
   function reg(type){
       if(type == "in")
       {
           $("#reg").css("display", "block");
           $("#login").css("display", "none");
       }
       else if(type == "back")
       {
           $("#reg").css("display", "none");
           $("#login").css("display", "block");
       }

   }

   //登录ajax
   $("#loginbtn").click(function(){
       if(validate("1")){
           //获取表单所有值
           const formData = $("#loginForm").serialize();

           $.post('/users/login',
               formData,
               function(res){
                   if(res.username !=""&& res.message =="")
                   {
                       let loginStatus = res.username + "，已登录|<a href=\'/users/logout\'>退出</a>";
                       $("#loginStatus").append(loginStatus);
                       $("#loginStatus").css("display","block");
                       $("#upload").css("display", "block");
                       $("#loginForm").css("display", "none");
                       $("#message").css("display", "none");
                       $("#message").empty();

                       location.reload();
                   }
                   else{
                       let ms = "<h4 style='color: red;'>"+ res.message + "</h4>";
                       $("#message").append(ms);
                       $("#message").css("display", "block");
                       $("#loginStatus").css("display","none");
                       $("#loginForm").css("display", "block");
                   }
               })
       }
   })


   //注册ajax
   $("#regbtn").click(function(){
       if(validate("2")){
           //获取表单所有值
           const formData = $("#regForm").serialize();

           $.post('/users/reg',
               formData,
               function(res){
                   console.log(res);
                   if(res.username !=""&& res.message =="")
                   {
                       alert("已注册成功！请登录");
                       $("#loginStatus").append(loginStatus);
                       $("#loginStatus").css("display","none");
                       $("#loginForm").css("display", "block");
                       $("#message").css("display", "none");
                   }
                   else{
                       let ms = "<h4 style='color: red;'>"+ res.message + "</h4>";
                       $("#message").append(ms);
                       $("#message").css("display", "block");
                       $("#loginStatus").css("display","none");
                       $("#loginForm").css("display", "block");
                   }
               })
       }
   })

   //校验
   function validate(type){
       let logName = $("#logName").val();
       let logPassword = $("#logPassword").val();
       let regName = $("#regName").val();
       let regPassword = $("#regPassword").val();
       let regConfirm = $("#regConfirm").val();

       //登录
       if(type == "1")
       {
           if(logName == ""||logPassword ==""){
               alert("用户名或者密码不能为空！");
               return false;
           }
           else{
               return true;
           }
       }
       //注册
       if(type == "2")
       {
           if(regName == ""|| regPassword ==""){
               alert("用户名或者密码不能为空！");
               return false;
           }
           if(regPassword === regConfirm)
           {
               return true;
           }
           else{
               alert("两次输入的密码不一致，请重新输入！");
               return false;
           }
       }
   }

   //上传ajax
   $("#uploadBtn").click(function(){

       var bookUl = $("#photoBook ul");
       var formData = new FormData($("#myfile" )[0]);
       $.ajax({
           url: '/upload',
           type: 'POST',
           data: formData,
           async: false,
           cache: false,
           contentType: false,
           processData: false,
           success:function(res){
               let src = "/img/"+ res.filename;
               let photo = "<li><img src="+ src+ "></li>";
               let liLength = $("#photo ul li").length;
               let curPage = $("#photo .active");


               if(liLength%6==0 && liLength != 0)
               {
                   let num = liLength/6+1;

                   //加div、加图片
                   let ul = "<ul id="+ num + " class='active'></ul>";
                   $("#photo").append(ul);
                   $("#"+ num).append(photo);
                   curPage.removeClass("active");
                   curPage.css("display", "none");

                   //翻页组件
                   let page = "<li><a href='#'>"+ num +"</a></li>";
                   $(".pagination").append(page);
               }
               else{
                   curPage.append(photo);
               }
           },

           error: function(res){
               alert(res);
           }
       })
   })


   $(".pagination").on("click","a", function(event){
       let pagenum = event.target.innerText;

       let totalpage = $(".pagination li").length;

       for(let i = 1,len = totalpage;i <= len; i++)
       {
           if(pagenum == i){
               $("#"+ pagenum).css("display", "block");
           }
           else{
               $("#"+ i).css("display", "none");
           }
       }
   })